<template>
    <div>
        <NavTop class="message-nav-top">
            <div class="msg-top">
                <div class="user-pic" @click="goMyHome">
                    <img :src="$baseUrl + info.imgUrl" alt="">
                </div>
                <div class="user-nick">{{ info.nick }}</div>
                <!-- 新建群聊 -->
                <van-popover
                    v-model="showPopover"
                    trigger="click"
                    :actions="actions"
                    @select="onSelect"
                    placement="left-start"
                >
                    <template #reference>
                        <div class="creat-group">
                            <img src="@/assets/tianjia.png" alt="">
                        </div>
                    </template>
                </van-popover>
            </div>
        </NavTop>
        <MessageList/>
        <Tabbar/>
    </div>
</template>

<script>
import NavTop from '@/components/NavTop'
import Tabbar from '@/components/Tabbar'
import MessageList from '@/components/MessageList'
import { mapState, mapMutations } from 'vuex'
import { reqMessagePageInfo } from '@/api'
export default {
    components: {
        NavTop,
        MessageList,
        Tabbar
    },
    data() {
        return {
            info: {},
            showPopover: false,
            actions: [{ text: '新建群聊' }, { text: '退出登录' }]  // 通过 actions 属性来定义菜单选项
        }
    },
    computed: {
        ...mapState({
            _id: state => state.login.userInfo._id
        })
    },
    methods: {
        ...mapMutations('login', ['clearUserInfo']),
        // 顶部用户头像
        goMyHome() {
            this.$router.push({
                path: '/userhome',
                query: {
                    _id: this._id
                }
            })
        },
        // 获取用户信息（头像 + 昵称）
        async getMessagePageInfo() {
            let res = await reqMessagePageInfo({_id: this._id})
            if (res.status === 200) {
                this.info = res.data
            }
        },
        // 下拉选择框
        onSelect(action) {
            if (action.text === '新建群聊') {
                this.$router.push('/creategroup/新建群聊')
            } else if (action.text === '退出登录') {
                // 清空vuex
                this.clearUserInfo()
                // 清空本地存储
                localStorage.removeItem('userInfo')
                // 断开socket连接
                this.$socket.disconnect()
                // 去登录页
                this.$router.push('/login')
            }
        }
    },
    mounted() {
        this.getMessagePageInfo()
    }
}
</script>

<style lang="less" scoped>
.message-nav-top {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    .msg-top {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0 0.3333rem 0 0.4rem;
        box-sizing: border-box;
        position: relative;
        .user-pic {
            width: .9333rem;
            height: .9333rem;
            border-radius: 50%;
            overflow: hidden;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .user-nick {
            flex: 1;
            font-size: .4rem;
            color: #fffbe8;
            margin-left: .2667rem;
        }
    }
}
.creat-group {
    width: .6667rem;
    height: .6667rem;
    img {
        width: 100%;
        height: 100%;
    }
}
</style>